<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    why? 为什么当数据改变时它怎么知道数据改变了?
    <br />
    请打开console.log <strong>控制台</strong>
    <script>
      let data = {
        count: 1,
        name: "wxs",
      };
      Object.keys(data).forEach(function (key) {
        // 以下赋值,仅仅是防止defineProperty找不到外部data 内存溢出
        let internalVal = data[key];
        Object.defineProperty(data, key, {
          get() {
            console.log("data get");
            return internalVal;
          },
          set(val) {
            console.log("data change handle 快去记录依赖关系");
            internalVal = val;
          },
        });
      });
      console.log(data.count);
      console.log((data.count = 10));
    </script>
  </body>
</html>
